<template>
  <el-aside width="260px" class="sidebar">
    <div class="sidebar-header">
      <h2>公务员写作工具</h2>
      <el-icon class="header-icon">
        <Document />
      </el-icon>
    </div>
    
    <el-menu
      :default-active="$route.path"
      class="sidebar-menu"
      background-color="#dc3545"
      text-color="#ffffff"
      active-text-color="#fff"
      @select="handleMenuSelect"
    >
      <el-sub-menu index="materials">
        <template #title>
          <el-icon><Files /></el-icon>
          <span>材料写作</span>
        </template>
        
        <el-menu-item index="/materials/democratic-life">
          <el-icon><EditPen /></el-icon>
          <span>民主生活会材料</span>
        </el-menu-item>
        
        <el-menu-item index="/materials/summary">
          <el-icon><DocumentChecked /></el-icon>
          <span>总结材料</span>
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="reports">
        <template #title>
          <el-icon><ChatDotSquare /></el-icon>
          <span>汇报材料</span>
        </template>
        
        <el-menu-item index="/reports/job-report">
          <el-icon><User /></el-icon>
          <span>述职报告</span>
        </el-menu-item>
        
        <el-menu-item index="/reports/work-report">
          <el-icon><Document /></el-icon>
          <span>工作汇报</span>
        </el-menu-item>
        
        <el-menu-item index="/reports/experience">
          <el-icon><Reading /></el-icon>
          <span>心得体会</span>
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="publicity">
        <template #title>
          <el-icon><Postcard /></el-icon>
          <span>宣传材料</span>
        </template>
        
        <el-menu-item index="/publicity/news">
          <el-icon><ChatLineSquare /></el-icon>
          <span>新闻稿</span>
        </el-menu-item>
      </el-sub-menu>

      <el-sub-menu index="administrative">
        <template #title>
          <el-icon><Management /></el-icon>
          <span>行政公文</span>
        </template>
        
        <el-menu-item index="/administrative/letter">
          <el-icon><Message /></el-icon>
          <span>函</span>
        </el-menu-item>
        
        <el-menu-item index="/administrative/command">
          <el-icon><Flag /></el-icon>
          <span>命令</span>
        </el-menu-item>
        
        <el-menu-item index="/administrative/decision">
          <el-icon><Select /></el-icon>
          <span>决定</span>
        </el-menu-item>
        
        <el-menu-item index="/administrative/reply">
          <el-icon><ChatDotRound /></el-icon>
          <span>批复</span>
        </el-menu-item>
        
        <el-menu-item index="/administrative/notification">
          <el-icon><Bell /></el-icon>
          <span>通报</span>
        </el-menu-item>
        
        <el-menu-item index="/administrative/notice">
          <el-icon><Warning /></el-icon>
          <span>通知</span>
        </el-menu-item>
        
        <el-menu-item index="/administrative/opinion">
          <el-icon><ChatRound /></el-icon>
          <span>意见</span>
        </el-menu-item>
        
        <el-menu-item index="/administrative/request">
          <el-icon><QuestionFilled /></el-icon>
          <span>请示</span>
        </el-menu-item>
      </el-sub-menu>

      <el-menu-item index="/speech">
        <el-icon><Mic /></el-icon>
        <span>发言稿</span>
      </el-menu-item>
      
      <el-menu-item index="/model-test">
        <el-icon><Setting /></el-icon>
        <span>模型配置</span>
      </el-menu-item>
    </el-menu>
    
    <div class="sidebar-footer">
      <el-text class="version-info">v1.0.0</el-text>
    </div>
  </el-aside>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const handleMenuSelect = (index: string) => {
  router.push(index)
}
</script>

<style scoped>
.sidebar {
  height: 100vh;
  background: linear-gradient(135deg, #dc3545 0%, #b02a30 100%);
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}

.sidebar-header {
  padding: 20px 16px;
  text-align: center;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.header-icon {
  font-size: 24px;
  opacity: 0.8;
}

.sidebar-menu {
  border: none;
  background: transparent !important;
}

.sidebar-menu .el-sub-menu {
  background: transparent !important;
}

.sidebar-menu .el-sub-menu__title {
  background: transparent !important;
  color: white !important;
  font-weight: 500;
  padding-left: 20px !important;
}

.sidebar-menu .el-sub-menu__title:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.sidebar-menu .el-menu-item {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 400;
  padding-left: 40px !important;
  border-radius: 0 20px 20px 0;
  margin-right: 12px;
  transition: all 0.3s ease;
}

.sidebar-menu .el-menu-item:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}

.sidebar-menu .el-menu-item.is-active {
  background: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  font-weight: 600;
  box-shadow: inset 3px 0 0 white;
}

.sidebar-menu .el-sub-menu .el-menu {
  background: rgba(0, 0, 0, 0.1) !important;
}

.sidebar-footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 16px;
}

.version-info {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

/* 深度选择器处理 Element Plus 内部样式 */
:deep(.el-sub-menu__icon-arrow) {
  color: white !important;
}

:deep(.el-menu-item .el-icon) {
  color: inherit !important;
}

:deep(.el-sub-menu__title .el-icon) {
  color: white !important;
}
</style>